<template>
    <div class="topo-properties">
        <div class="topo-properties-nav">
            <template v-if="configObject != null && isLayer == false">
                <div style="text-align:center;">
                    <img style="width:60px;height:60px;" src="/statics/quasar-logo.png"/>
                </div>
            </template>
        </div>
        <template v-if="configObject != null && isLayer == false">
            <div class="topo-properties-tabs">
                <div class="topo-properties-tab" @click="changeTab(0)"
                     :class="{ 'topo-properties-tab-active': tabIndex == 0 }"
                >
                    布局
                </div>
                <div class="topo-properties-tab" @click="changeTab(1)"
                     :class="{ 'topo-properties-tab-active': tabIndex == 1 }"
                >
                    通信
                </div>
                <div class="topo-properties-tab" @click="changeTab(2)"
                     :class="{ 'topo-properties-tab-active': tabIndex == 2 }"
                >图层
                </div>
            </div>
            <div class="topo-properties-table">
                <!-- 组件样式 -->
                <div v-show="tabIndex == 0" class="tabClass">
                    <table style="display: none">
                        <tr>
                            <td width="50%" style="padding:5px 0px;background-color:#eee;">属性</td>
                            <td width="50%" style="padding:5px 0px;background-color:#eee;">值</td>
                        </tr>
                    </table>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="位置与尺寸" name="1">
                            <table>
                                <tr>
                                    <td width="50%">X坐标</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.position.x"
                                                         controls-position="right"
                                                         :controls="false"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Y坐标</td>
                                    <td>
                                        <el-input-number v-model="configObject.style.position.y"
                                                         controls-position="right"
                                                         :controls="false"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td>宽度</td>
                                    <td>
                                        <el-input-number v-model="configObject.style.position.w"
                                                         controls-position="right"
                                                         :controls="false"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td>高度</td>
                                    <td>
                                        <el-input-number v-model="configObject.style.position.h"
                                                         controls-position="right"
                                                         :controls="false"
                                        />

                                    </td>
                                </tr>
                            </table>
                        </el-collapse-item>
                        <el-collapse-item title="基本样式" name="2">
                            <table>
                                <tr v-if="configObject.name != undefined">
                                    <td width="50%">组件名称</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.name"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.dataBind.paramMin != undefined">
                                    <td width="50%">最小值</td>
                                    <td>
                                        <el-input-number v-model="configObject.dataBind.paramMin" :controls="false"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.dataBind.paramMax != undefined">
                                    <td width="50%">最大值</td>
                                    <td>
                                        <el-input-number v-model="configObject.dataBind.paramMax" :controls="false"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.dataBind.interval != undefined">
                                    <td width="50%">刻度间隔</td>
                                    <td>
                                        <el-input-number v-model="configObject.dataBind.interval" :controls="false"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.weatherModel">
                                    <td width="50%">天气样式</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.weatherModel" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option label="完整模式" value="完整模式"/>
                                            <el-option label="简约模式" value="简约模式"/>
                                        </el-select>
                                    </td>
                                </tr>
                                <tr v-if="configObject && configObject.componentShow.indexOf('组态界面') > -1">
                                    <td width="50%">组态界面</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.dataBind.ztPageData" clearable
                                                   placeholder="请选择"
                                        >
                                            <el-option :label="item.pageName" :value="item.guid + '&' + item.deviceMac"
                                                       v-for="item in ztOption"
                                                       :key="item.id"
                                            />
                                        </el-select>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">图层高度</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.zIndex" controls-position="right"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">旋转角度</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.transform"
                                                         controls-position="right"
                                                         @change="onAngle(configObject.style.transform)"
                                        />
                                    </td>
                                </tr>
                                <template
                                    v-if="configObject.componentShow && configObject.componentShow.indexOf('萤石云') > -1"
                                >
                                    <tr>
                                        <td width="50%">设备序列号</td>
                                        <td width="50%">
                                            <el-input v-model="configObject.dataBind.serialNumber"
                                                      placeholder="萤石云控制台获取"
                                            />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50%">通道号</td>
                                        <td width="50%">
                                            <el-input v-model="configObject.dataBind.channelNumber"
                                                      placeholder="萤石云控制台获取"
                                            />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50%">accessToken</td>
                                        <td width="50%">
                                            <el-input v-model="configObject.dataBind.accessToken"
                                                      placeholder="萤石云控制台获取"
                                            />
                                        </td>
                                    </tr>
                                </template>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('直播视频') > -1">
                                    <td width="50%">视频流URL</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.videoUrl" placeholder="Flv格式直播流"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <td width="50%">视频地址</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.videoUrl" placeholder="MP4视频地址"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('直播视频2') > -1">
                                    <td width="50%">视频地址</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.videoUrl" placeholder="视频地址"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <td width="50%">封面地址</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.imageUrl" placeholder="视频封面地址"/>
                                    </td>
                                </tr>
                                <tr v-if="isLayer == false && configObject.type != 'map'">
                                    <td width="50%">背景颜色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.backColor" show-alpha
                                                         :predefine="predefineColors"
                                                         color-format="hex"
                                        />
                                    </td>
                                </tr>
                                <template
                                    v-if="isLayer == false && (configObject.type != 'flow-bar' && configObject.type != 'flow-bar-dynamic' && configObject.type != 'map')"
                                >
                                    <tr>
                                        <td width="50%">透明度</td>
                                        <td width="50%">
                                            <el-input-number v-model="configObject.style.opacity" :controls="false"
                                                             placeholder="0.5"
                                            />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50%">边框圆角</td>
                                        <td width="50%">
                                            <el-input-number v-model="configObject.style.borderRadius" :controls="false"
                                                             placeholder="10"
                                            />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50%">阴影长度</td>
                                        <td width="50%">
                                            <el-input-number v-model="configObject.style.boxShadowWidth"
                                                             :controls="false" placeholder="20"
                                            />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50%">阴影颜色</td>
                                        <td width="50%">
                                            <el-color-picker v-model="configObject.style.boxShadowColor" show-alpha
                                                             :predefine="predefineColors"
                                                             color-format="hex"
                                            />
                                        </td>
                                    </tr>
                                </template>

                                <tr v-if="configObject.style.url != undefined && configObject.style.url != null">
                                    <td width="50%">图片路径</td>
                                    <td width="50%">
                                        <img :src="configObject.style.url" class="avatar"
                                             @click="handleClick('图片路径')" style="align:center;"
                                             crossorigin="anonymous"
                                        >
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.text != undefined">
                                    <td width="50%">文字</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.style.text"/>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.textAlign != undefined">
                                    <td width="50%">对齐方式</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.textAlign" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option label="居左" value="left"/>
                                            <el-option label="居中" value="center"/>
                                            <el-option label="居右" value="right"/>
                                        </el-select>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.fontFamily != undefined">
                                    <td width="50%">字体类型</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.fontFamily" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option :label="item" :value="item" v-for="item in fontFamilyOptions"
                                                       :key="item"
                                            />
                                        </el-select>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.fontSize != undefined">
                                    <td width="50%">字体大小</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.fontSize" controls-position="right"
                                                         :controls="false"
                                        />

                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('滤镜渲染') > -1"
                                    style="height: 40px;"
                                >
                                    <td width="50%" v-if="configObject.style.isFilter">滤镜渲染</td>
                                    <td width="50%" v-else>阴影渲染</td>
                                    <td width="50%">
                                        <el-radio-group v-model="configObject.style.isFilter">
                                            <el-radio :label="true">滤镜</el-radio>
                                            <el-radio :label="false">阴影</el-radio>
                                        </el-radio-group>
                                        <!-- <el-checkbox v-model="configObject.style.isFilter"></el-checkbox> -->
                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('组件颜色') > -1">
                                    <td width="50%">组件颜色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.foreColor"
                                                         :predefine="predefineColors"
                                                         color-format="hex"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">组件显隐</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.visible" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option label="显示" :value="true"/>
                                            <el-option label="隐藏" :value="false"/>
                                        </el-select>
                                    </td>
                                </tr>

                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('自定义echarts') > -1"
                                    style="height: 40px;"
                                >
                                    <td width="50%">代码视图</td>
                                    <td width="50%" style="text-align:left;padding-left:10px">
                                        <i class="el-icon-edit" @click="echartClick">编辑</i>
                                    </td>
                                </tr>
                                <tr v-if="configObject.componentShow && configObject.componentShow.indexOf('地图文件') > -1"
                                    style="height: 40px;"
                                >
                                    <td width="50%">地图选择</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.dataBind.mapAddress" placeholder="请选择"
                                                   filterable
                                        >
                                            <el-option label="安徽" value="安徽"/>
                                            <el-option label="澳门" value="澳门"/>
                                            <el-option label="北京" value="北京"/>
                                            <el-option label="重庆" value="重庆"/>
                                            <el-option label="福建" value="福建"/>
                                            <el-option label="甘肃" value="甘肃"/>
                                            <el-option label="广东" value="广东"/>
                                            <el-option label="广西" value="广西"/>
                                            <el-option label="贵州" value="贵州"/>
                                            <el-option label="海南" value="海南"/>
                                            <el-option label="河北" value="河北"/>
                                            <el-option label="黑龙江" value="黑龙江"/>
                                            <el-option label="河南" value="河南"/>
                                            <el-option label="湖北" value="湖北"/>
                                            <el-option label="湖南" value="湖南"/>
                                            <el-option label="江苏" value="江苏"/>
                                            <el-option label="江西" value="江西"/>
                                            <el-option label="吉林" value="吉林"/>
                                            <el-option label="辽宁" value="辽宁"/>
                                            <el-option label="内蒙古" value="内蒙古"/>
                                            <el-option label="宁夏" value="宁夏"/>
                                            <el-option label="青海" value="青海"/>
                                            <el-option label="山东" value="山东"/>
                                            <el-option label="上海" value="上海"/>
                                            <el-option label="山西" value="山西"/>
                                            <el-option label="四川" value="四川"/>
                                            <el-option label="台湾" value="台湾"/>
                                            <el-option label="天津" value="天津"/>
                                            <el-option label="香港" value="香港"/>
                                            <el-option label="新疆" value="新疆"/>
                                            <el-option label="西藏" value="西藏"/>
                                            <el-option label="云南" value="云南"/>
                                            <el-option label="浙江" value="浙江"/>
                                            <el-option label="自定义" value="自定义"/>
                                        </el-select>
                                    </td>
                                </tr>
                                <tr v-if="configObject.dataBind.mapAddress == '自定义'">
                                    <td width="50%" height="40">地图数据地址</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.dataBind.mapUrl" placeholder="地图数据地址"/>
                                    </td>
                                </tr>
                            </table>
                        </el-collapse-item>
                        <!-- 滚动表格开始 -->
                        <el-collapse-item title="表格样式" name="4"
                                          v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播表') > -1"
                        >
                            <table>
                                <tr>
                                    <td width="50%">行数</td>
                                    <td width="50%">
                                        <q-input type="number" v-model="configObject.style.rowNum"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">字体颜色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.foreColor" show-alpha
                                                         :predefine="predefineColors"
                                                         color-format="hex" style="align:center;"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">表头背景色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.headerBGC" show-alpha
                                                         :predefine="predefineColors"
                                                         color-format="hex" style="align:center;"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">奇数行背景色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.oddRowBGC" show-alpha
                                                         :predefine="predefineColors"
                                                         color-format="hex" style="align:center;"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">偶数行背景色</td>
                                    <td width="50%">
                                        <el-color-picker v-model="configObject.style.evenRowBGC" show-alpha
                                                         :predefine="predefineColors"
                                                         color-format="hex" style="align:center;"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">轮播时间间隔</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.waitTime" :controls="false"
                                                         :min="1000"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">表头高度</td>
                                    <td width="50%">
                                        <el-input-number v-model="configObject.style.headerHeight" :controls="false"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">表头宽度</td>
                                    <td width="50%">
                                        <el-input v-model="configObject.style.columnWidth"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">是否显示行号</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.index" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option label="显示" :value="true"/>
                                            <el-option label="隐藏" :value="false"/>
                                        </el-select>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">轮播方式</td>
                                    <td width="50%">
                                        <el-select v-model="configObject.style.carousel" placeholder="请选择"
                                                   style="align:center;"
                                        >
                                            <el-option label="行" value="single"/>
                                            <el-option label="页" value="page"/>
                                        </el-select>
                                    </td>
                                </tr>
                            </table>
                        </el-collapse-item>
                        <!-- 滚动表格结束 -->
                    </el-collapse>
                </div>
                <!-- echarts图表地址开始 -->
                <div v-show="tabIndex == 1" style="padding:5px;"
                     v-if="configObject.componentShow && (configObject.componentShow.indexOf('自定义echarts') > -1 || configObject.componentShow.indexOf('地图文件') > -1)"
                >
                    <div style="margin-bottom:10px;line-height:20px;font-weight: 700;margin-top:5px;">
                        <span>数据引擎地址</span></div>
                    <div style="margin-bottom:10px;">
                        <el-button @click="dialogVisibleInterface=true" style="width:100%" type="primary" size="mini">
                            编辑配置
                        </el-button>
                    </div>
                    <div>
                        <el-button @click="sendHttpRequest" style="width:100%" type="success" size="mini">发送请求
                        </el-button>
                    </div>
                    <!-- <div style="margin-bottom:20px;">
                      <el-input v-model="configObject.dataBind.echartUrl" type="textarea" :autosize="{ minRows: 5 }"
                        placeholder="目前仅支持GET请求" />
                    </div> -->
                    <div style="margin-bottom:10px;line-height:20px;font-weight: 700;margin-top:20px;">
                        <span>成功响应示例</span></div>
                    <div>
                        <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="响应数据"
                                  v-model="echartData"
                        >
                        </el-input>
                    </div>
                    <div style="margin-top: 10px;" v-if="configObject.dataBind.echartUrl">
                        <el-button plain type="success" icon="el-icon-search"
                                   @click="echartHttpClick(configObject.dataBind.echartUrl)" style="width: 300px;"
                        >请求
                        </el-button>
                    </div>
                </div>
                <!-- echarts图表地址结束 -->
                <!-- 画布图层 -->
                <div v-show="tabIndex == 2">
                    <div v-for="item in topoData.components" class="nameClass"
                         :style="{'backgroundColor':configObject.identifier==item.identifier?'#ffebc0':''}"
                    >
                        <i class="el-icon-document" style="margin-right: 3px;"></i> <span @click="componentClick(item)">{{ item.name == undefined ? item.type : item.name }}</span>
                        <i class="el-icon-view" style="margin-left: 5px;color: #21cc96;" v-if="item.style.visible"
                           @click="visibleClick(item)"
                        ></i>
                        <i class="el-icon-view" style="margin-left: 5px;" v-else @click="visibleClick(item)"></i>
                        <i class="el-icon-edit" style="margin-left: 5px;color: #409EFF;" @click="nameUpdateClick(item)"
                           v-if="configObject.identifier==item.identifier"
                        ></i>
                        <i class="el-icon-delete" style="margin-left: 5px;color: #E6A23C;" @click="removeItem()"
                           v-if="configObject.identifier == item.identifier"
                        ></i>
                    </div>
                </div>
            </div>
        </template>
        <!-- 界面背景设置 -->
        <template v-if="isLayer">
            <el-form label-width="80px">
                <el-form-item label="背景名称">
                    <el-input placeholder="请填写背景名称" v-model="topoData.name" size="small" style="width:180px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="分辨率">
                    <el-select v-model="layerWH" placeholder="请选择" style="width:180px;">
                        <el-option v-for="item in fblOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分辨率宽" v-if="layerWH == 'custom'">
                    <el-input-number placeholder="请填写分辨率宽" v-model="topoData.layer.width" size="small"
                                     :controls="false" :min="100"
                                     style="width:180px;"
                    />
                </el-form-item>
                <el-form-item label="分辨率高" v-if="layerWH == 'custom'">
                    <el-input-number placeholder="请填写分辨率高" v-model="topoData.layer.height" size="small"
                                     :controls="false" :min="100"
                                     style="width:180px;"
                    />
                </el-form-item>
                <el-form-item label="背景颜色">
                    <el-color-picker v-model="topoData.layer.backColor" show-alpha :predefine="predefineColors"
                                     color-format="hex"
                    />
                </el-form-item>
                <el-form-item label="背景图片">
                    <div style="position: relative;" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                        <img v-if="topoData.layer.backgroundImage" :src="topoData.layer.backgroundImage"
                             class="bgAvatar"
                             @click="handleClick('背景图片')" crossorigin="anonymous"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('背景图片')"></i>
                        <div class="iconHover" v-if="topoData.layer.backgroundImage && iconShow"
                             @mouseenter="mouseEnter"
                             @mouseleave="mouseLeave"
                        >
                            <i class="el-icon-plus avatar-upload-icon" @click="handleClick('背景图片')"></i>
                            <i class="el-icon-delete avatar-delete-icon" @click="topoData.layer.backgroundImage = ''"
                            ></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="拖拽缩放">
                    <el-checkbox v-model="topoData.layer.dragZoom">开启</el-checkbox>
                </el-form-item>
            </el-form>
        </template>
        <el-dialog title="图库" :visible.sync="dialogVisible" width="1100px" :close-on-click-modal="false"
                   append-to-body
        >
            <div class="dialogClass">
                <TopoSelectImage ref="topoSelectImage"/>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectImageClick">确 定</el-button>
      </span>
        </el-dialog>
        <el-dialog title="数据引擎" :visible.sync="dialogTip" width="50%" append-to-body :close-on-click-modal="false"
                   v-dialogDrag v-if="configObject" :fullscreen="dialogFull"
        >
            <div>
                <div style="position: absolute;top: 20px;right: 50px;" @click="handelFull">
                    <i class="el-icon-full-screen"></i>
                </div>
                <div style="font-size: 20px;margin-bottom:20px;">
                    <a href="https://www.isqqw.com/" target="_blank"
                    >Echarts图表合集-仅支持vue语法糖、数据引擎-echartData</a>
                    <i class="el-icon-info" @click="dialogExplain = true" style="color: #E6A23C;margin-left:5px;"></i>
                </div>
                <div class="box-message" style="max-height: 200px;">
                    <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入响应示例"
                              v-model="configObject.dataBind.echartData"
                    >
                    </el-input>
                </div>
                <div class="box-message">
                    <ace @input="aceInput" ref="ace" v-model="configObject.dataBind.echartOption"/>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="echartRunClick">运 行</el-button>
        <el-button @click="dialogTip = false">关 闭</el-button>
      </span>
        </el-dialog>
        <el-dialog title="数据引擎示例" :visible.sync="dialogExplain" width="30%" append-to-body
                   :close-on-click-modal="false"
        >
            <div class="box__message" v-html="topoUtil.getEchartExplain()">
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogExplain = false">关 闭</el-button>
      </span>
        </el-dialog>
        <div
            style="position: fixed;top:80px;right:280px;height:100px;width:100px;z-index: 1000;background-color: transparent;"
            v-if="false" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="angleStyle"
        >
            <SetupAngle ref="setupAngle" @angle="onAngle" :angleData="configObject.style.transform"/>
        </div>
        <el-dialog title="重命名" :visible.sync="dialogVisibleRename" width="20%" :close-on-click-modal="false"
                   append-to-body
        >
            <el-input v-model="renameValue" placeholder="请输入名称"></el-input>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleRename = false">取 消</el-button>
            <el-button type="primary" @click="submitRename">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog title="公共配置" :visible.sync="dialogVisibleInterface" width="750px" append-to-body
                   :close-on-click-modal="false" v-if="configObject"
        >
            <div>
                请求地址：
                <el-select v-model="configObject.dataBind.method" placeholder="请选择"
                           style="width: 90px;margin-right:5px;"
                >
                    <el-option label="get" value="get"></el-option>
                    <el-option label="post" value="post"></el-option>
                    <el-option label="put" value="put"></el-option>
                </el-select>
                <el-input placeholder="例：http:127.0.0.1/" v-model="configObject.dataBind.url" style="width: 500px;"/>
            </div>
            <div style="margin-top: 20px;">
                请求间隔：
                <el-input-number v-model="configObject.dataBind.interval" :controls="false" :min="0"
                                 style="width: 90px;margin-right:5px;"
                ></el-input-number>
                <el-select v-model="configObject.dataBind.intervalType" placeholder="请选择" style="width: 90px;">
                    <el-option label="秒" value="秒"></el-option>
                    <el-option label="分" value="分"></el-option>
                    <el-option label="时" value="时"></el-option>
                </el-select>
            </div>
            <div style="margin-top: 20px;overflow-y:auto;">
                <el-tabs style="height: 350px;" v-model="configObject.dataBind.requestType">
                    <el-tab-pane label="Params">
                        <el-table
                            :data="configObject.dataBind.paramData"
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50"/>
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="handleEdit(configObject.dataBind.paramData)"
                                    >+
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, configObject.dataBind.paramData)"
                                    >-
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Body">
                        <div style="margin-bottom:10px">
                            <el-radio-group v-model="configObject.dataBind.contentType">
                                <el-radio :label="1">none</el-radio>
                                <el-radio :label="2">form-data</el-radio>
                                <el-radio :label="3">x-www-form-urlencoded</el-radio>
                                <el-radio :label="4">json</el-radio>
                                <el-radio :label="5">xml</el-radio>
                            </el-radio-group>
                        </div>
                        <el-empty description="该请求没有body体" v-if="configObject.dataBind.contentType==1"
                                  :image-size="100"
                        ></el-empty>
                        <el-table
                            :data="configObject.dataBind.bodyDataTable"
                            style="width: 100%"
                            v-else-if="configObject.dataBind.contentType==2||configObject.dataBind.contentType==3"
                        >
                            <el-table-column type="index" width="50"/>
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="handleEdit(configObject.dataBind.bodyDataTable)"
                                    >+
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, configObject.dataBind.bodyDataTable)"
                                    >-
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入内容"
                            v-model="configObject.dataBind.bodyDataArea"
                            v-else-if="configObject.dataBind.contentType==4||configObject.dataBind.contentType==5"
                        >
                        </el-input>
                    </el-tab-pane>
                    <el-tab-pane label="Header">
                        <el-table
                            :data="configObject.dataBind.headerData"
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50"/>
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="handleEdit(configObject.dataBind.headerData)"
                                    >+
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, configObject.dataBind.headerData)"
                                    >-
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleInterface = false">取 消</el-button>
            <el-button type="primary" @click="submitInterface">保 存</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>


import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
import TopoSelectImage from '../topo/TopoSelectImage';
import TopoVariable from '../topo/TopoVariable';
import topoUtil from '../topo/util/topo-util.js';
import SetupAngle from '../topo/TopoAngle.vue';
import request from '@/utils/request';

export default {
    name: 'TopoProperties',
    components: {
        TopoSelectImage, TopoVariable, SetupAngle,
    },
    data() {
        return {
            tabIndex: 0,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
                '#ffffff',
                '#000',
            ],
            fontFamilyOptions: ['Arial', 'Helvetica', 'sans-serif', '宋体', '黑体', '微软雅黑'],
            textAlignOptions: ['left', 'right', 'center', 'justify'],
            borderStyleOptions: ['solid', 'dashed', 'dotted'],
            fblOptions: [{
                value: '960x600',
                label: '小屏幕:960x600',
            }, {
                value: '1024x768',
                label: '小屏幕:1024x768',
            }, {
                value: '选项3',
                label: '小屏幕:1280x1024',
            }, {
                value: '1366x768',
                label: 'PC网页:1366x768',
            }, {
                value: '1440x900',
                label: 'PC网页:1440x900',
            }, {
                value: '1920x960',
                label: 'PC网页:1920x960',
            }, {
                value: '1920x1080',
                label: 'PC网页:1920x1080',
            }, {
                value: '2048x858',
                label: '2K屏幕:2048x858',
            }, {
                value: '2048x1080',
                label: '2K屏幕:2048x1080',
            }, {
                value: '3840x2160',
                label: '4K屏幕:3840x2160',
            }, {
                value: '3656x2664',
                label: '2K屏幕:3656x2664',
            }, {
                value: '4096x3112',
                label: '4K屏幕:4096x3112',
            }, {
                value: 'custom',
                label: '自定义',
            }],
            layerWHTemp: '',
            dialogVisible: false,
            //当前的选择图片
            baseApi: 'http://' + this.topoUtil.getServerIp() + ':' + this.topoUtil.getServerPort() + '/prod-api',
            currentInput: '',
            bindParams: [],
            animationTitle: '动画设置',
            animationDialog: false,
            animationForm: {},
            clickText: '',

            singleClickTitle: '单击设置',
            singleClickDialog: false,

            //变量选择
            deviceImei: this.$route.query.deviceImei,
            variableDialog: false,

            //天气组件位置选择
            //省
            provinceList: [],
            //市
            cityList: [],
            //区
            districtList: [],
            slidePreview: null,

            //组态页面集合
            ztOption: [],

            //变量选择： false单选 true多选
            multiple: false,
            textStatic: '',
            ztModelOption: [],
            paramNameList: [],
            bDeviceZtBindList: [],
            dialogTip: false,
            echartData: '',
            dialogExplain: false,
            dialogFull: false,
            angleStyle: {
                opacity: 0.1,
            },
            debouncedWatch: null,
            activeNames: ['2'],
            //画布图层
            dialogVisibleRename: false,
            renameValue: '',
            renameItem: {},
            //接口配置
            dialogVisibleInterface: false,
            iconShow: false,
        };
    },
    computed: {
        layerWH: {
            get: function (val) {
                console.log('val', this.layerWHTemp);
                if (this.layerWHTemp == 'custom') {
                    return 'custom';
                } else {
                    return this.topoData.layer.width + 'x' + this.topoData.layer.height;
                }
            },
            set: function (val) {
                this.layerWHTemp = val;
                if (val == 'custom') {
                    this.topoData.layer.width = 1920;
                    this.topoData.layer.height = 1080;
                } else {
                    var wh = val.split('x');
                    this.topoData.layer.width = parseInt(wh[0]);
                    this.topoData.layer.height = parseInt(wh[1]);
                }
            },
        },
        ...mapState({
            topoData: state => state.topoEditor.topoData,
            selectedComponents: state => state.topoEditor.selectedComponents,
            selectedComponentMap: state => state.topoEditor.selectedComponentMap,
            isLayer: state => state.topoEditor.selectedIsLayer,
            configObject: state => state.topoEditor.selectedComponent,
            historyData: state => state.topoEditor.historyData,
        }),
        animations() {
            let items = [];
            items = (this.configObject.direction && this.configObject.direction == 'vertical') ?
                [{ label: '向上', value: 'up' }, { label: '向下', value: 'down' }] : [{
                    label: '向右',
                    value: 'right',
                }, { label: '向左', value: 'left' }];
            return items;
        },
        provinceCode() {
            // console.log("configObject",this.configObject);
            if (this.configObject != null) {
                this.provinceChange(this.configObject.dataBind.provinceCode);
                this.cityChange(this.configObject.dataBind.cityCode);
            }
        },
    },
    watch: {},
    created() {
    },
    mounted() {
  
        
        this.getProvinceList();
    },
    methods: {
        ...mapMutations('topoEditor', [
            'setSelectedComponent',
            'setLayerSelected',
            'execute',
        ]),
        //公共配置开始
        handleEdit(row) {
            let data = {
                key: '',
                value: '',
            };
            row.push(data);
        },
        handleDelete(xh, row) {
            if (row.length == 1) {
                return;
            }
            row.forEach((element, index) => {
                if (index == xh) {
                    row.splice(index, 1);
                }
            });
        },
        submitInterface() {
            this.$emit('printData');
            this.dialogVisibleInterface = false;
        },
        sendHttpRequest() {
            // console.log('发起请求',this.configObject.dataBind);
            let url = this.configObject.dataBind.url;
            if (!url) {
                this.$message.error('无可用请求接口，请编辑配置！');
                return;
            }
            let method = this.configObject.dataBind.method;
            let params = {};
            let paramData = this.configObject.dataBind.paramData;
            for (let itemindex = 0; itemindex < paramData.length; itemindex++) {
                //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
                if (paramData[itemindex].key) {
                    this.$set(params, paramData[itemindex].key, paramData[itemindex].value);
                }
            }
            let data = {};
            let bodyDataTable = this.configObject.dataBind.bodyDataTable;
            for (let itemindex = 0; itemindex < bodyDataTable.length; itemindex++) {
                //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
                if (bodyDataTable[itemindex].key) {
                    this.$set(data, bodyDataTable[itemindex].key, bodyDataTable[itemindex].value);
                }
            }
            let headers = {};
            let headerData = this.configObject.dataBind.headerData;
            for (let itemindex = 0; itemindex < headerData.length; itemindex++) {
                //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
                if (headerData[itemindex].key) {
                    this.$set(headers, headerData[itemindex].key, headerData[itemindex].value);
                }
            }
            let contentType = '';
            if (this.configObject.dataBind.contentType == 2) {
                contentType = 'multipart/form-data';
            } else if (this.configObject.dataBind.contentType == 3) {
                contentType = 'application/x-www-form-urlencoded;charset=utf-8';
            } else if (this.configObject.dataBind.contentType == 4) {
                contentType = 'application/json;charset=utf-8';
            } else if (this.configObject.dataBind.contentType == 5) {
                contentType = 'text/xml';
            } else {
                contentType = 'application/json';
            }
            request({
                url: url,
                method: method,
                'Content-Type': contentType,
                params: params,
                headers: headers,
                data: data,
                requestType: '数据引擎',
            }).then((res) => {
                // console.log('接口请求成功',res);
                this.configObject.dataBind.echartData = JSON.stringify(res.data);
                this.echartData = JSON.stringify(res.data);
            }).catch(error => {
                this.$message.error('网络异常,请稍后再试！');
            });
        },
        //公共接口配置结束
        //组件删除
        removeItem() {
            this.execute({ op: 'del' });
            this.setLayerSelected(true);
        },
        //修改组件名称
        nameUpdateClick(item) {
            this.renameItem = item;
            this.renameValue = this.renameItem.name == undefined ? this.renameItem.type : this.renameItem.name;
            this.dialogVisibleRename = true;
        },
        submitRename() {
            this.renameItem.name = this.renameValue;
            this.dialogVisibleRename = false;
        },
        //组件旋转
        componentClick(item) {
            this.setSelectedComponent(item);
            this.setLayerSelected(false);
        },
        //组件显示隐藏
        visibleClick(item) {
            if (item.style.visible) {
                item.style.visible = false;
            } else {
                item.style.visible = true;
            }
        },
        mouseEnter() {
            this.angleStyle = {
                opacity: 0.8,
            };
            this.iconShow = true;
        },
        mouseLeave() {
            this.angleStyle = {
                opacity: 0.1,
            };
            this.iconShow = false;
        },
        //增加滑动位置
        addTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            console.log(this.configObject.dataAction.translateList);
            let state = {
                id: id + 1,
                direction: '',
                position: 0,
            };
            this.configObject.dataAction.translateList.push(state);
        },
        //删除滑动位置
        deleteTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            this.configObject.dataAction.translateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataAction.translateList.splice(i, 1);
                    return true;
                }
            });
        },
        handelFull() {
            if (this.dialogFull) {
                this.dialogFull = false;
                this.$refs.ace.setMaxLines(20);
            } else {
                this.dialogFull = true;
                this.$refs.ace.setMaxLines(35);
            }
        },
        //ace编辑器
        aceInput(data) {
            //console.log('ace编辑器',data);
            this.configObject.dataBind.echartOption = data;
        },
        //旋转角度
        onAngle(angle) {
            console.log('旋转角度：', angle);
            this.transform('自定义旋转角度', angle);
        },
        //echats数据引擎
        echartHttpClick(dataUrl) {
            let query = {
                url: dataUrl,
            };
            let url = '/ignoreToken/getEchartData';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((response) => {
                // console.log("获取图表数据", response.data);
                this.configObject.dataBind.echartData = JSON.stringify(JSON.parse(JSON.stringify(response.data)), null, '\t');
            });
        },
        //echart运行代码视图
        echartRunClick() {
            this.configObject.dataBind.echartRun = new Date().getTime();
            this.$message.success('运行成功');
            this.dialogTip = false;
        },
        //echart代码视图
        echartClick() {
            this.dialogTip = true;
            this.$nextTick(() => {
                if (this.dialogFull) {
                    this.$refs.ace.setMaxLines(35);
                    this.$refs.ace.setValue(this.configObject.dataBind.echartOption);
                } else {
                    this.$refs.ace.setMaxLines(20);
                    this.$refs.ace.setValue(this.configObject.dataBind.echartOption);
                }
            });
        },
        //增加状态开关
        addSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                imageUrl: '',
            };
            this.configObject.dataBind.stateList.push(state);
        },
        deleteSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            this.configObject.dataBind.stateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateList.splice(i, 1);
                    return true;
                }
            });
        },
        getProvinceList() {
            let param = {
                lvl: 1,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.provinceList = res.data;
            });
        },
        selectModelChange() {
            this.ztModelOption.forEach(element => {
                if (element.imageUrl == this.configObject.imageUrl) {
                    this.configObject.modelUrl = element.modelUrl;
                }
            });
        },
        stack(val) {
            console.log('topoData', this.configObject);
            if (this.configObject) {
                let zIndex = 0;
                if (val == '置顶') {
                    zIndex = this.topoData.zIndexTop == undefined ? 0 : this.topoData.zIndexTop + 1;
                    this.topoData.zIndexTop = zIndex;
                } else if (val == '置底') {
                    zIndex = this.topoData.zIndexBottom == undefined ? 0 : this.topoData.zIndexBottom - 1;
                    this.topoData.zIndexBottom = zIndex;
                } else if (val == '上一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex + 1;
                } else if (val == '下一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex - 1;
                }
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.zIndex = zIndex;
                }
            }
        },
        transform(val, value) {
            if (this.configObject) {
                let transform = '';
                let transformType = '';
                if (val == '顺时针旋转') {
                    transform = this.configObject.style.transform + 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '逆时针旋转') {
                    transform = this.configObject.style.transform - 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '水平镜像') {
                    transform = 0;
                    transformType = `rotateY(180deg)`;
                } else if (val == '垂直镜像') {
                    transform = 0;
                    transformType = `rotateX(180deg)`;
                } else if (val == '自定义角度' && value) {
                    transform = this.configObject.style.transform + parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '自定义旋转角度' && value) {
                    transform = parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                }
                // this.configObject.style.transform=transform;
                // this.configObject.style.transformType=transformType;
                // console.log("旋转格式",this.configObject.style.transformType);
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.transform = transform;
                    component.style.transformType = transformType;
                }
            }
        },
        selectZtPage() {
            console.log('初始化界面名称', this.configObject.dataBind.ztPage);
            this.ztOption.forEach(element => {
                if (element.guid == this.configObject.dataBind.ztPage) {
                    this.configObject.dataBind.ztPageName = element.pageName;
                }
            });
        },
        createCode() {
            var code = '';
            //设置长度，这里看需求，我这里设置了4
            var codeLength = 4;

            //设置随机字符
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

            //循环codeLength 我设置的4就是循环4次
            for (var i = 0; i < codeLength; i++) {
                //设置随机数范围,这设置为0 ~ 36
                var index = Math.floor(Math.random() * 9);

                //字符串拼接 将每次随机的字符 进行拼接
                code += random[index];
            }

            //将拼接好的字符串赋值给展示的code
            return code;
        },
        provinceChange(item) {
            let param = {
                provinceZh: item,
                lvl: 2,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.cityList = res.data;
            });
        },
        cityChange(item) {
            let param = {
                leaderZh: item,
                lvl: 3,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.districtList = res.data;
            });
        },
        handleClick(label) {
            this.currentInput = label;
            this.dialogVisible = true;
        },
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice()[this.$refs.topoSelectImage.handleChoice().length - 1];
            this.dialogVisible = false;
            // console.log("选中图片",selectImage)
            if (this.currentInput == '背景图片') {
                this.topoData.layer.backgroundImage = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '图片路径') {
                this.configObject.style.url = this.baseApi + selectImage.resourceUrl;
            }
        },
        dialogClick() {
            //this.dialogVisible=true;
        },
        initPage(configData) {
            this.configData = configData;
        },
        changeTab(tabIndex) {
            this.tabIndex = tabIndex;
        },
        bindData(configObject, index, isLayer) {
            this.configObject = configObject;
            this.isLayer = isLayer;
            if (isLayer === false) {

            }
        },
        generateTargetComponentOptions() {
            var options = [];
            this.topoData.components.forEach(component => {
                if (this.configObject.identifier != component.identifier) {
                    options.push({
                        label: component.name || component.type,
                        value: component.identifier,
                    });
                }
            });
            return options;
        },
    },
};
</script>
<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 12px;
}

.title {
    text-align: center;
    background-color: #666;
    font-size: 20px;
    color: #fff;
}

.dialogClass {
    height: 550px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.topo-properties {
    //border: #e6e6e6 solid 1px;
    //background-color: #f1f3f4;
    // box-shadow: #C6BABA 0px 0px 20px;
    width: 100%;
    height: calc(100vh - 61px);

    .topo-properties-tabs {
        height: 35px;
        display: flex;
        //border-bottom: #ccc solid 1px;
        //background-color: #f1f3f4;

        .topo-properties-tab {
            height: 48px;
            text-align: center;
            line-height: 48px;
            flex: 1;
            font-size: 14px;
            color: #000000;
        }

        .topo-properties-tab + .topo-properties-tab {
            //border-left: #ccc solid 1px;
        }

        .topo-properties-tab:hover {
            cursor: pointer;
        }

        .topo-properties-tab-active {
            color: #000;
            border-bottom: #3388ff solid 2px;
            font-weight: bold;
        }
    }

    .topo-properties-table {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 92px);

        table {
            width: 100%;
            border-collapse: collapse;

            td {
                text-align: center;
                padding: 0px;
                border: #ccc solid 1px;
            }

            .q-input {
                border: none;
                height: 40px;
            }

            .q-select {
                border: none;
                margin-right: 0px;
            }
        }
    }

    .not-surpport {
        margin: 20px auto;
        text-align: center;
        font-size: 18px;
    }
}
</style>
<style scoped>
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100px;
    background-color: rgb(104, 102, 102);
    line-height: 100px;
    margin-right: 15px;
    text-align: center;
}

.avatar-switch {
    width: 30px;
    height: 30px;
}

.avatar-uploader-icon-switch {
    font-size: 20px;
    color: #8c939d;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.bgAvatar {
    width: 100%;
    height: 100px;
    margin: 0 10 10 10;
}

.avatar {
    width: 30px;
    height: 30px;
    margin: 0 10 10 10;
}

.vrAvatar {
    width: 40px;
    height: 40px;
    padding: 5px;
}
</style>
<style>
.el-input-number .el-input__inner {
    text-align: left !important;
    border-width: 1px;
    /* background: #f1f3f4 !important; */
}

.topo-properties-table::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.topo-properties-table::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.topo-properties-table::-webkit-scrollbar-track {
    background-color: #ddd;
}

.box-message {
    text-align: left;
    overflow-y: auto;
    margin-bottom: 10px;
}

.box-message .el-textarea__inner {
    background-color: #eef2f6;
}

.box-message:-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.box-message:-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.box-message:-webkit-scrollbar-track {
    background-color: #ddd;
}

.box__message {
    padding: 20px;
    border: 1px solid #f4dfb6;
    background: #fffbf4;
    text-align: left;
    height: 500px;
    overflow-y: auto;
}

.tabClass {
    padding: 5px;
}

.tabClass .el-collapse-item__header {
    //background-color: #f1f3f4;
    color: #000;
    font-weight: 700;
    font-size: 12px;
    text-indent: 10px;
}


.tabClass .el-input__inner {
    //background-color: #f1f3f4;
}

.topo-properties .tabClass table td {
    font-size: 12px;
    font-weight: 400;
    color: #7f838c;
    line-height: 18px;
    letter-spacing: 0px;
    border: none !important;
}
</style>
<style scoped>
.tab-index-2 {
    font-size: 12px;
    font-weight: 400;
    color: #7f838c;
    line-height: 18px;
    padding: 5px;
}

.tab-index-3 {
    font-size: 14px;
    font-weight: 400;
    color: #7f838c;
    line-height: 20px;
    width: auto;
    max-width: 100%;
    padding: 3px;
    //background-color: #f1f3f4;
    margin-bottom: 3px;
    margin-left: 10px;
}

.tab-index-3:hover {
    cursor: pointer;
}

.iconHover {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    width: 100%;
    height: 100px;
    opacity: 0.5;
    text-align: center;
    line-height: 100px;
}

.avatar-delete-icon {
    font-size: 25px;
    color: red;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
}

.avatar-upload-icon {
    font-size: 25px;
    color: #67C23A;
    text-align: center;
    cursor: pointer;
}
</style>
